// ------- List renderer -------
.o_list_renderer {
  --ListRenderer-table-padding-x: #{$table-cell-padding-x-sm};
  --ListRenderer-thead-padding-y: #{map-get($spacers, 4)};
  --ListRenderer-thead-bg-color: #{$o-webclient-background-color};
  --ListRenderer-thead-border-end-color: #{$border-color};
  --ListRenderer-tfoot-bg-color: #{$o-list-footer-bg-color};

  margin-left: var(--ListRenderer-margin-x, unset);
  margin-right: var(--ListRenderer-margin-x, unset);

  // sticky header on desktop
  @include media-breakpoint-up(md) {
    height: 100%;

    .o_list_table thead {
      @include o-position-sticky(0);
      z-index: 1;
    }
  }

  th, td {
    // This fixes a bug that was hidding part of cell borders on Firefox.
    background-clip: padding-box;
  }

  .o_list_view & {
    --ListRenderer-thead-padding-y: #{$table-cell-padding-y-sm};
    --ListRenderer-table-padding-x: #{$o-horizontal-padding};
  }

  .o_list_table {
    --table-bg: #{$o-view-background-color};


    // We need this to be collapse because we want to add a border on the rows
    // for sale order/invoice lines of type section.
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;

    > thead, > tbody, > tfoot {
      > tr > :first-child {
        padding-left: var(--ListRenderer-table-padding-x);
      }

      > tr > :last-child {
        padding-right: var(--ListRenderer-table-padding-x);
      }

      > tr > :empty {
        padding: 0;
      }
    }

    thead {
      background-color: var(--ListRenderer-thead-bg-color);

      th {
        padding-top: var(--ListRenderer-thead-padding-y);
        background-color: transparent;
        color: $headings-color;
      }

      .o_list_number_th {
        /*rtl:ignore*/
        text-align: right;
      }
    }

    // Override BS default
    > :not(:first-child) {
      border-top-width: 0;
    }

    tbody > tr > td:not(.o_list_record_selector) {
      &:not(.o_handle_cell):not(.o_list_button):not(.o_list_record_remove):not(.o_list_record_open_form_view) {
        --fieldWidget-display: block; // Will affect inner components (see fields.scss)

        display: table-cell;
        @include text-truncate();
        vertical-align: middle;

        &.o_list_text {
          white-space: pre-wrap;
        }
      }

      &.o_list_number {
        /*rtl:ignore*/
        text-align: right;
        /*rtl:ignore*/
        direction: ltr;
      }

      &.o_list_text {
        word-break: break-word;

        .o_field_widget textarea.o_input {
          vertical-align: top;
        }
      }

      &.o_list_char.o_color_cell .o_field_color {
        width: 17px;
        height: 17px;
      }

      &.o_color_picker_cell .o_field_color_picker .o_colorlist {
        justify-content: flex-end;
      }

      &.o_list_button {
        white-space: nowrap;

        > button {
          padding: 0 5px;

          &:not(:last-child) {
            margin-right: 3px;
          }
        }
      }

      // ------- Decrease table's inner content "visual depth" -------
      &:first-of-type > tr:first-child:not(.o_group_header) {
        box-shadow: inset 0px 5px 10px -4px rgba(black, 0.15);
      }
    }

    &.o_list_computing_widths {
      > tbody > tr > td {
        &.o_list_text, // text field, className on the td
        > .o_field_text {
          // text field with widget, className inside the td
          white-space: pre !important;
        }
      }
    }

    tfoot {
      > tr > td {
        color: $o-list-footer-color;
        background-color: $o-list-footer-bg-color;
        font-weight: $o-list-footer-font-weight;
        @include o-text-overflow(table-cell);
      }

      .o_list_number {
        /*rtl:ignore*/
        text-align: right;
        /*rtl:ignore*/
        direction: ltr;
      }
    }

    .o_column_sortable:not(.o_handle_cell) {
      user-select: none; // Prevent unwanted selection while sorting
    }

    .o_list_record_selector {
      width: 40px; // Don't force to keep o_group_name width dynamic
      vertical-align: middle;
    }

    .o_list_record_remove, .o_handle_cell, .o_list_record_open_form_view {
      width: 1px; // to prevent the column to expand
    }


    .o_list_table_ungrouped {
      .o_list_controller {
        max-width: 35px !important;
      }
    }

    .o_list_record_remove button, .o_list_record_open_form_view button {
      padding: 0px;
      background: none;
      border-style: none;
      display: table-cell;
      cursor: pointer;
    }

    .o_list_record_remove button, button {
      padding-top: 5px;
    }

    .o_keyboard_navigation {
      th:focus-within, td:focus-within {
        --table-accent-bg: none;
        background-color: $o-form-lightsecondary;
        outline: none;
      }
    }

    // It's important that this appears after the keyboard navigation.
    // Otherwise, o_keyboard_navigation will override the background color
    // of the focused cell.
    .o_selected_row {
      th:focus-within, td:focus-within {
        --table-accent-bg: none;
        background-color: $o-view-background-color;
      }
    }

    // Grouped list views
    tbody > tr.o_group_header {
      > th,
      > td {
        vertical-align: middle;
        padding-top: 5px;
        padding-bottom: 5px;
      }

      .o_group_name {
        @include o-text-overflow(table-cell);
      }

      .o_group_buttons {
        display: inline-block;
        margin-left: 10px;

        > button {
          padding-top: 0;
          padding-bottom: 0;
        }
      }

      .o_pager {
        cursor: text;
        user-select: none;
        text-align: right;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: -2px;
        margin-bottom: -2px;

        .o_pager_previous,
        .o_pager_next {
          max-height: 30px;
          padding: 0 5px;
          background-color: lighten($o-brand-lightsecondary, 10%);

          &:hover {
            background-color: $o-brand-lightsecondary;
          }
        }
      }

      .o_group_caret {
        margin-inline-start: calc(var(--o-list-group-level, 0) * #{map-get($spacers, 4)});
      }
    }

    tbody + tbody {
      border-top: none; // Override bootstrap for grouped list views
    }


    .o_data_cell.o_text_overflow,
    .o_data_cell.o_invisible_modifier {
      // Override display: none to keep table cells aligned. Note: cannot use
      // 'initial' as it will force them to 'inline', not 'table-cell'.
      display: table-cell !important;
    }

    &.o_resizing tr > :not(.o_column_resizing) {
      opacity: 0.5;
    }

    &.o_empty_list {
      table-layout: fixed;
    }

    th {
      position: relative;
    }

    span.o_resize {
      cursor: col-resize;
    }

    .o_list_open_form_view {
      width: 64px;
      min-width: 64px
    }

    .o_list_actions_header {
      width: 32px;
      min-width: 32px
    }

    .o_data_row.o_list_no_open {
      cursor: default;
    }

    .o_data_row:not(.o_selected_row) .o_data_cell {
      // Boolean fields in non-selected rows completely disabled.
      .form-check {
        pointer-events: none;
      }

      // These widgets enable the checkbox if there is no readonly modifier.
      &.o_boolean_button_cell,
      &.o_boolean_favorite_cell,
      &.o_boolean_toggle_cell,
      &.o_toggle_button_cell {
        > .o_field_widget:not(.o_readonly_modifier) .form-check {
          pointer-events: auto;
        }
      }
    }

    .o_data_row:not(.o_selected_row) {
      .o_list_many2one,
      .o_list_char,
      .o_list_activity_cell,
      .o_list_number {
        white-space: nowrap;

        .o_field_widget:not(.o_row_handle):not(.o_field_handle):not(.o_field_badge) {
          display: inline;

          span:not(.o_m2o_avatar) {
            @include o-text-overflow(inline);
          }
        }
      }
    }

    .o_data_row.o_selected_row > .o_data_cell {

      > .o_field_widget:not(.o_readonly_modifier):not(.o_invisible_modifier) {
        width: 100%;

        .o_input {
          border: none;
          padding: 0;
          margin: 0;
          width: 100%;
        }

        &.o_field_text {
          vertical-align: top;
        }

        .o_field_many2one_selection {
          .o_external_button {
            padding: 0;
            border: none;
            background-color: inherit;
            margin-left: 5px;
            font-size: 12px;
          }
        }

        &.o_field_monetary input {
          width: 0; // override width: 100px and let flex makes this input grow
          margin: 0 4px;
        }

        .o_field_many2one_avatar {
          display: flex;
        }

        &.o_field_badge {
          width: auto; // override width: 100% to keep the optimal badge width
        }

        .o_input_dropdown,
        .o_datepicker {
          > .o_input {
            padding-right: 15px; // to prevent caret overlapping
          }

          > .o_dropdown_button,
          .o_datepicker_button {
            margin-right: 5px;
            @include o-position-absolute(0, 0);
          }
        }

        > input.o_field_translate,
        textarea.o_field_translate {
          padding-right: 25px;

          + span.o_field_translate {
            margin-left: -35px;
            padding: 0px 1px;
            text-align: right;
            width: 35px;
            vertical-align: top;
            font-size: 12px;
          }
        }

        > .o_row_handle {
          visibility: hidden; // hide sequence when editing
        }
      }
    }

    .o_field_x2many_list_row_add,
    .o_group_field_row_add {
      a:focus,
      a:active,
      button:focus,
      button:active {
        color: $link-hover-color;
        outline: none;
      }

      button {
        font-weight: 400;
        padding: 0;
        vertical-align: baseline;
      }
    }
  }

  .o_data_row.o_selected_row > .o_data_cell.o_required_modifier:not(.o_readonly_modifier) {
    border-bottom: 1px solid $o-input-border-required;
  }

  .o_data_row.o_selected_row > .o_data_cell.o_invalid_cell:not(.o_readonly_modifier) {
    border-bottom: 1px solid $danger;
  }

  /**
  Because of border-collapse, border top and border bottom are 'merged'.

  * cell border overlaps row border
  * when there is a border collapse the first cell (e.g. A1) take over the following cell (e.g. B1 or A2)
  ┌──┬──┐
  │A1│B1│
  ├──┼──┤
  │A2│B2│
  └──┴──┘

  So we apply some rules to have the style wanted:
  */
  // 1. we set the global separator (gray line) of the table on the row (bottom) and not on the cell (bottom)
  .o_data_row {
    border-bottom-width: 1px;

    &:not(.o_selected_row):not(.o_data_row_selected):focus-within > * {

      --#{$variable-prefix}table-accent-bg: blue;
    }
  }

  // 2. we remove the bottom border (added by BS5) on all cells (this force to show the top border of selected cell)
  .o_data_row > .o_data_cell {
    border-bottom-width: 0;
  }

  // 3. we add only a bottom border to selected cells (this force to show the bottom border of the selected cell)
  .o_data_row.o_data_row_selected > .o_data_cell {
    border-bottom-width: 1px;
  }

  .o_data_row.o_dragged {
    display: flex;

    > td {
      flex-grow: 0;
      flex-shrink: 0;
    }
  }

  .o_optional_columns_dropdown .dropdown-item .o-checkbox .text-truncate {
    max-width: 30em;
  }
}

@include media-breakpoint-down(md) {
  .o_data_row_selected {
    user-select: none; // Prevent text selection when editing
  }

  .o_web_client.o_touch_device .o_content table.o_list_table.table tr > {
    .o_list_record_selector:first-child {
      display: none;

      // first-child will be hidden so add left padding to second child
      & + * {
        padding-left: var(--ListRenderer-table-padding-x);
      }
    }
  }
}

// ------- Sample mode -------
.o_list_view .o_view_sample_data {
  .o_list_table {
    cursor: default !important;
  }

  .o_data_row,
  .o_list_footer,
  .o_group_header,
  thead .o_list_record_selector {
    @include o-sample-data-disabled;
  }
}

.o_list_view .o_list_buttons {
  > * {
    margin: auto 0;
  }
}

.modal-footer .o_list_selection_box {
  margin-bottom: 0rem !important;
}
